<template>
  <div class="rent-list">
    <div v-show="showTable">
      <el-table :data="tableData"
                border
                :fit="true"
                style="width: 100%">
        <el-table-column label="房屋id"
                         prop="houseId">
        </el-table-column>
        <el-table-column label="地址"
                         prop="address" width="280">
        </el-table-column>
        <el-table-column label="价格"
                         prop="price">
        </el-table-column>
        <el-table-column label="租赁人"
                         prop="zuke">
        </el-table-column>
        <el-table-column label="租赁人身份证号"
                         prop="zukeIdcard">
        </el-table-column>
        <el-table-column label="租赁人电话号码"
                         prop="phone">
        </el-table-column>
        <el-table-column label="操作" v-if="role==='admin'">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       @click="viewContract(scope.$index, scope.row)">查看合同
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="stopContract(scope.$index, scope.row)">终止合同
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="role==='renter'">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       @click="viewContract(scope.$index, scope.row)">查看合同
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="applyRentOut(scope.$index, scope.row)">申请退租
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
    <router-view v-show="showContract"></router-view>
    <Contract v-show="showContract" fileData="file" @get-contract="getContract" :role="role"></Contract>
  </div>
</template>
<script lang="js">
import Contract from '@/components/Contract.vue'
import { openDoc } from '@/api/api'
import axios from 'axios'
import row from 'ant-design-vue/lib/row'

export default {
  name: 'Rentinglist',
  components: {
    Contract
  },
  data () {
    return {
      tableData: [],
      showContract: false,
      showTable: true,
      file: '',
      role: '',
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        type: '',
        name: '',
        description: '',
      }
    }
  },
  created () {
    this.role = this.$store.state.userInfo.role
    this.getAll()
  },
  methods: {
    getAll: function () {
      axios.get('/hetong/' + this.pagination.currentPage).then((res) => {
        if (res.data.code === 1) {
          this.tableData = res.data.data.records
          this.pagination.currentPage = res.data.data.current
          this.pagination.total = res.data.data.total
          this.pagination.pageSize = res.data.data.size
        }
      })

    },
    viewContract (index, row) {
      this.showContract = true
      this.showTable = false
      // 请求文件流 访问接口
      let res = {}
      this.file = res
    },
    stopContract (index, row) {
      this.$confirm('确定要终止合同吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '终止成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    },
    // 申请退租
    applyRentOut (index, row) {
      this.$confirm('确定要申请退租吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        // 访问接口
        axios.post('/hetong', this.tableData[index]).then((res => {
          console.log(this.tableData[index])
          if (res.data.code === 1) {
            this.$message.success(res.data.data)
          } else {
            this.$message.error(res.data.msg)
          }
        }))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    },
    getContract (data) {
      this.showContract = data
      this.showTable = true
    },
    //切换页码
    handleCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
  }

}
</script>
<style lang="scss" scoped>
</style>
